<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <!-- Quick CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='front/css/vender/quick-website.css') }}" id="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='front/css/login.css') }}">
  <link rel="stylesheet" href="../../../static/front/font/bootstrap-icons.min.css">
</head>
<!-- Preloader -->
<style>
  @keyframes hidePreloader {
    0% {
      width: 100%;
      height: 100%;
    }

    100% {
      width: 0;
      height: 0;
    }
  }

  body>div.preloader {
    position: fixed;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 1071;
    opacity: 0;
    transition: opacity .5s ease;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body:not(.loaded)>div.preloader {
    opacity: 1;
  }

  body:not(.loaded) {
    overflow: hidden;
  }

  body.loaded>div.preloader {
    animation: hidePreloader .5s linear .5s forwards;
  }

  @media (forced-colors: active) {

    /* 自定义强制颜色模式下的样式 */
    .btn {
      background-color: ButtonFace;
      /* 使用系统按钮背景色 */
      color: ButtonText;
      /* 使用系统按钮文本色 */
    }

    /* 其他样式 */
    body {
      background-color: Window;
      /* 使用系统背景色 */
      color: WindowText;
      /* 使用系统文本色 */
    }
  }
  /* 响应式布局断点 */
  @media (max-width: 576px) {
    /*登录注册--表单*/
    .auth-form-light {
        /*scale: 90%;*/
        background: white;
        width: 100%;
        border-radius: 8px;
    }
    .auth-form-light {
      padding: 1.5rem;
    }
    .brand-logo img {
      max-width: 80%;
    }
    h4 {
      font-size: 1.25rem;
    }
    .form-control {
      font-size: 0.875rem;
    }
  }

  @media (min-width: 577px) and (max-width: 768px) {
    .auth-form-light {
      padding: 2rem;
    }
    .brand-logo img {
      max-width: 85%;
    }
    /*登录注册--表单*/
    .auth-form-light {
        scale: 90%;
        background: white;
        width: 100%;
        border-radius: 8px;
    }
  }

  @media (min-width: 769px) and (max-width: 992px) {
    .auth-form-light {
      padding: 2.5rem;
    }
  }

  @media (min-width: 993px) {
    .auth-form-light {
      padding: 3rem;
    }
  }

  /* 优化触摸体验 */
  @media (hover: none) and (pointer: coarse) {
    .form-control {
      min-height: 44px;
    }
    .btn {
      min-height: 44px;
      padding: 0.75rem 1.5rem;
    }
  }

  /* 添加一些样式来确保表单切换时布局不会发生变化 */
  .form-group {
    margin-bottom: 1.5rem;
  }

</style>


<body>
  <!-- Preloader 页面加载效果 -->
  <div class="preloader">
    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
  <!--{#登录表单#}-->
  <div class="full-page-wrapper">
    <div class="content-wrapper d-flex align-items-center vh-100">
      <div class="row w-100 mx-0">
        <div class="col-lg-auto mx-auto">
          <!--{#          表单#}-->
          <div class="auth-form-light text-left py-lg-5 px-lg-5">
            <div class="brand-logo pt-2 pb-2">
              <img src="../../../static/front/images/logo.png" height="42" alt="logo">
            </div>
            <h4>你好！欢迎登陆</h4>

            <form id="loginForm" class="pt-3 needs-validation" novalidate>
              <input type="hidden" name="next" value="{{ request.args.get('next', '/') }}">
              <div class="form-group">
                <input type="text" class="form-control" name="username" id="validationCustom01" placeholder="Username" required>
                <div class="valid-feedback">Looks good!</div>
                <div class="invalid-feedback">请输入账号</div>
              </div>
              <div class="form-group">
                <input type="password" class="form-control" name="password" id="validationCustom02" placeholder="Password" required>
                <div class="valid-feedback">Looks good!</div>
                <div class="invalid-feedback">请输入密码.</div>
              </div>

              <div class="mt-3">
                <button class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" type="submit">登录</button>
              </div>
              <div class="text-center mt-4 font-weight-light">
                没有账号? <a href="{{ url_for('login.register') }}" class="text-primary">去注册</a>
              </div>
            </form>

           </div>
        </div>
      </div>
    </div>
    <!-- content-wrapper ends -->
  </div>
  <!-- Core JS  -->
  <script src="../../../static/vendor/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
  <script>

    //监听页面加载,添加名为loaded的CSS,延迟300毫秒
    window.addEventListener("DOMContentLoaded", function () {
      setTimeout(function () {
        document.querySelector('body').classList.add('loaded');
      }, 300);
    });
    (() => {
      'use strict'

      // 获取我们想要应用自定义 Bootstrap 验证样式的所有表单
      const forms = document.querySelectorAll('.needs-validation')
      // 循环浏览它们并阻止提交
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false);
        // 为表单中的每个输入字段添加焦点事件监听器
        const inputs = form.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
          input.addEventListener('focus', () => {
            // 当输入字段获得焦点时隐藏错误消息
            const errmsg = document.getElementById('errmsg')
            if (errmsg) {
              errmsg.style.display = 'none';
            }
          });
        });
      })
    })();

    document.getElementById('loginForm').addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止默认表单提交

      const formData = new FormData(this); // 获取表单数据
      fetch('{{ url_for("login.login") }}', {
        method: 'POST',
        body: formData,
      })
      .then(response => response.json())
      .then(data => {
        if (data.code === 200) {
          console.log(data);
          // 登录成功，重定向到下一页
          window.location.href = data.next || '/';
          alert(data.msg);
        } else {
          // 显示错误信息
          alert(data.msg);
        }
      })
      .catch(error => {
        console.error('请求失败:', error);
        alert('请求失败，请重试！');
      });
    });
  </script>
</body>

</html>
